<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实验一</title>
	</head>
	<body>
		<center>
			添加用户:<br><br>
			姓名：<input type="text" id="username" />
			email:<input type="text" id="email"  />
			电话：<input type="text" id="phone"  /><br><br>
			<input type="button" value="提交" onclick="add()"/>
			<hr />
			<table width="400px" border="1px" cellspacing="0px">
				<thead>
					<tr>
						<th>姓名</th>
						<th>email</th>
						<th>电话</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					
				</tbody>
			</table>
		</center>
		<script type="text/javascript">
			function add(){
				// 定义获取信息的位置
				var username = document.getElementById("username").value;
				var email = document.getElementById("email").value;
				var phone = document.getElementById("phone").value;
				var caozuo = "<a  onclick='del(this)'>delete</a>";// 双引号里面需要单引号，这里＋href会出现功能完成之后的跳转其他页面操作
				
				// 定义获取信息之后放置的位置
				var tbodyEle = document.getElementById("tbody");
				// 将信息添加到位置区域，标签可用引号，功能未变
				tbodyEle.innerHTML += "<tr>" + "<td>" + username + "</td>" + "<td>" + email + "</td>" + "<td>" + phone + "</td>" + "<td>" + caozuo + "</td>" + "</tr>";   
			}
			// 传入本身位置标签特性操作
			function del(a){
				// 获取客户端验证操作——布尔值
				var flag = window.confirm("你确认要删除资料吗");
				// 如果布尔值正确则运行下列函数
				if(flag){
					// a 标签外是 td 再外是tr 最终寻求删除的是tbody
					var trEle = a.parentNode.parentNode;
					var tbodyEle = trEle.parentNode;
					tbodyEle.removeChild(trEle);
				}
			}
		</script>
	</body>
	
</html>
